<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<jsp:include page="/common.jsp"></jsp:include>
<script type="text/javascript">
	Ext.onReady(function() {
		
		var store = new Ext.data.Store({//这是数据源      
			proxy : new Ext.data.HttpProxy({
				url : basePath + 'system/user.html?listJson'
			}),
			reader : new Ext.data.JsonReader({
				totalProperty : 'count',
				root : 'result',
				id : 'id'
			}, [ 'id', 'name', 'age', 'sex' ])
		});
		store.load({
			params : {
				start : 0,
				limit : 15
			}
		});

		
		var colModel = new Ext.grid.ColumnModel([//定义列      
		{
			id : 'id',
			header : 'ID',
			width : 50,
			sortable : true,
			dataIndex : 'id'
		}, {
			header : '名称',
			width : 100,
			sortable : true,
			dataIndex : 'name'
		}, {
			header : '年龄',
			width : 100,
			sortable : true,
			dataIndex : 'age'
		}, {
			header : '性别',
			width : 100,
			sortable : true,
			dataIndex : 'sex'
		} ]);

		var toolbar = new Ext.Toolbar({
			items : [ {
				xtype : 'button',
				iconCls : 'add',
				text : '增加',
				handler : function() {
					Ext.getCmp('form').getForm().reset();
					window.show();
				}
			}, '-', {
				xtype : 'button',
				iconCls : 'edit',
				text : '修改',
				handler : function() {
					edit();
				}
			},'-',{
				xtype : 'button',
				iconCls : 'delete',
				text : '删除',
				handler : function(){
					del();
				} 
			} ]
		});

		var grid = new Ext.grid.GridPanel({//列表
			id : 'grid',
			border : true,
			region : 'center',
			height:400,
			tbar : toolbar,
			renderTo : 'gridPanel',
			loadMask : true,
			/* title : '条目列表', */
			store : store,
			cm : colModel,
			autoScroll : false,
			trackMouseOver : true,
			viewConfig : {
				forceFit : true,
				enableRowBody : false,
				showPreview : false
			},
			plugins : new Ext.ux.PanelResizer({
				minHeight : 100
			}),
			bbar : new Ext.PagingToolbar({
				pageSize : 15,
				store : store,
				displayInfo : true,
				plugins : new Ext.ux.ProgressBarPager()
			})

		});

		var top = new Ext.FormPanel({//这里是搜索表单      
			buttonAlign : 'right',
			labelWidth : 70,
			renderTo : 'formPanel',
			/* 			region : 'north', */
			frame : true,
			title : '搜索',
			items : [ {
				layout : 'column',
				items : [ {
					columnWidth : .20,
					layout : 'form',
					items : [ {
						xtype : 'textfield',
						fieldLabel : '名称',
						id : 'name',
						name : 'name',
						anchor : '90%'
					} ]
				}, {
					columnWidth : .20,
					layout : 'form',
					items : [ {
						xtype : 'numberfield',
						fieldLabel : '年龄',
						name : 'age',
						id : 'age',
						anchor : '90%'
					} ]
				}, {
					columnWidth : .20,
					layout : 'form',
					items : [ {
						xtype : 'combo',
						fieldLabel : '性别',
						store:['男','女'],
						name : 'sex',
						id : 'sex',
						anchor : '90%'
					} ]
				},{
					
					layout:'form',
					items:[{
						xtype:'button',
						text:'保存',
						handler:function(){
							store.load({
							params : {
								start : 0,
								limit : 20,
								name : Ext.get('name').dom.value,
								age : Ext.get('age').dom.value,
								sex : Ext.get('sex').dom.value
							}
						});
						}

					}]
				},{
					
					layout:'form',
					items:[{
						xtype:'button',
						text:'重置',
						handler:function(){
							top.form.reset();
						}
					}]
				} ]
			} ]
		});
		// 这里很关键，如果不加，翻页后搜索条件就变没了，这里的意思是每次数据载入前先把搜索表单值加上去，这样就做到了翻页保留搜索条件了      
		store.on('beforeload', function() {
			Ext.apply(this.baseParams, {
			name : Ext.get('name').dom.value,
			age : Ext.get('age').dom.value,
			sex : Ext.get('sex').dom.value
			});
		});
		
		function del(){
				var s = grid.getSelectionModel().getSelections();
				if (s.length>0) {
					Ext.Msg.confirm('确认', '真的要删除吗？', function(btn) {
						if (btn == 'yes') {
							var ids='';
							for (i = 0; i < s.length; i++) {
								ids += s[i].id+',';
							}
							ids = ids.substring(0,ids.length-1);
							Ext.Ajax.request({
								url : basePath+'system/user.html?delete',
								params:{id:ids},
								success : function(result) {
									Ext.Msg.alert('提示','删除成功');
									store.reload();
								}
							});
						}
					});
				} else {
					Ext.Msg.alert('出错啦', '你还没有选择要操作的记录！');
				}
		}

	function edit() {
			var s = grid.getSelectionModel().getSelections();
			var id = s[0].id;
			form.getForm().load({
				waitMsg : '正在加载数据请稍后',
				waitTitle : '提示',
				url : basePath + 'system/user.html?edit',
				params : {
					id : id
				},
				method : 'post',
				success : function(form1, action) {
					form.getForm().setValues({});
					window.show();
				},
				failure : function(form, action) {
					alert(action.result.error);
				}
			});
		}

		var form = new Ext.form.FormPanel({
			id : 'form',
			baseCls : 'x-plain',
			labelWidth : 55,
			defaultType : 'textfield',
			items : [ {
				xtype : 'hidden',
				name : 'id'
			}, {
				fieldLabel : '名称',
				name : 'name',
				anchor : '50%',
			}, {
				xtype : 'numberfield',
				fieldLabel : '年龄',
				name : 'age',
				anchor : '50%'
			}, {
				xtype : 'combo',
				fieldLabel : '性别',
				store : [ '男', '女' ],
				name : 'sex',
				mode : 'local',
				editale : true,
				triggerAction : 'all',
				/* value:0, */
				anchor : '50%'
			} ]
		});
		var window = new Ext.Window({
			title : '新增',
			width : 500,
			height : 300,
			closeAction:"hide",
			minWidth : 300,
			minHeight : 200,
			layout : 'fit',
			plain : true,
			closeAction : 'hide',
			bodyStyle : 'padding:5px',
			buttonAlign : 'center',
			items : [ form ],
			buttons : [
					{
						text : '保存',
						handler : function() {
							Ext.getCmp('form').getForm().submit(
									{
										waitMsg : '正在提交数据',
										waitTitle : '提示',
										url : basePath
												+ 'system/user.html?save',
										method : 'post',
										success : function(form, action) {
											Ext.Msg.alert('提示', '保存成功');
											window.hide();
											store.reload();
										},
										failure : function(form, action) {
											Ext.Msg.alert('提示', '原因如下：'
													+ action.result.errors);
										}
									});
						}
					}, {
						text : '取消',
						handler : function() {
							window.hide();
						}
					} ]
		});
	});
</script>
</head>
<body>
	<div id="formPanel"></div>
	<div id="gridPanel"></div>
</body>
</html>